<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
        />
        <title>bgmusic wxbridge soundjs</title>
    </head>
    <body>
        <h1>使用 `soundjs`，监听 `WeixinJSBridgeReady` 事件播放音乐 **微信专用**</h1>
        <script src="js/common.js"></script>
        <script src="js/soundjs.min.js"></script>
        <script>
            var soundLoadComplete = false; // 背景音乐是否加载完毕
            var backgroundMusicInstance = null; // 背景音乐实例
            createjs.Sound.alternateExtensions = ['mp3'];
            createjs.Sound.on('fileload', loadHandler, this);

            function loadHandler(event) {
                makeLog('music load complete');
                soundLoadComplete = true;
            }

            document.addEventListener(
                'WeixinJSBridgeReady',
                function() {
                    createjs.Sound.registerSound('bgmusic.mp3', 'sound'); // 注意,这句registerSound必须写在WeixinJSBridgeReady回调函数内才行,否则下方createjs.Sound.play就会无效
                    makeLog('WeixinJSBridgeReady');
                    var intInstance = setInterval(function() {
                        if (soundLoadComplete) {
                            clearInterval(intInstance);
                            makeLog('play');
                            backgroundMusicInstance = createjs.Sound.play(
                                'sound'
                            );
                        }
                    }, 10);
                },
                false
            );
        </script>
    </body>
</html>
